/*
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 *
 *
 *      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *
 *            佛祖保佑       永不宕机     永无BUG
 *
 * @Author: pengzhiwen
 * @LastEditors: pengzhiwen
 * @Description: 轨迹组件
 */
import React, {
    useState,
    useEffect
} from "react";
import Flag from "./flag";
import $ from "jquery";
import {Carousel} from "antd";
import {Empty} from "../common"
import "./index.scss";

function Track(props) {
    //type是区别模块
    let {
        type,
        userIdentity,
        data,
        moduleSign
    } = props;
    const [showEmpty, setShowEmpty] = useState(false);
    const [currentIndex, setCurrentIndex] = useState(0);
    const [nextExist, setNextExist] = useState(true);
    const [prevExist, setPrevExist] = useState(false);
    const [clickType, setClickType] = useState("next");
    const [flagCount, setFlagCount] = useState(6);
    // const [dataList, setDataList] = useState([]);
    // data = Array.isArray(data) && data.slice(data.length - flagCount,);
    //设置旗子大小按照屏幕宽度
    useEffect(()=>{
        let width = $(window).width()*0.8;
        let count = parseInt(width / 160);
        setFlagCount(count);
        window.addEventListener("resize", function(){
            let width = $(window).width()*0.8;
            let count = parseInt(width / 160);
            // changeLeft("prev");
            setFlagCount(count);
        })
    }, [])
    //反序，按时间从小到大排列，目前是从大到小
    // let sortData = [];
    // data.forEach((item, index)=>{
    //     sortData.unshift(item);
    // })
    let circleList = [], flagList = [];
    for(let i = 0; i < 40*(parseInt(data.length/flagCount) + 1); i++){
        circleList.push(
            <div className="circle-one"></div>
        )
    }
    // useEffect(()=>{
        let arr = [];
        data.forEach((item)=>{
            if(type == "baseMsg"){
                let obj = {
                    time: item.recordDate,
                    content: item.content
                }
                arr.push(obj);
            }
            if(type == "stuConditionMsg"){
                let str = "";
                if(item.examScore){
                    str += item.type + "分数" + item.examScore + "分，";
                }
                if(item.homeworkScore){
                    str += "日常作业平均分数" + item.homeworkScore + "分，";
                }
                if(item.performanceScore){
                    str += "课堂表现总分数" + item.performanceScore + "分，";
                }
                if(item.selfStudyTimes){
                    str += "自学总时长" + item.selfStudyTimes + "h，";
                }
                if(str[str.length - 1] == "，"){
                    str = str.substr(0, str.length - 1);
                }
                let obj = {
                    time: item.date,
                    content: str
                }
                arr.push(obj);
            }
            if(type == "attendanceMsg"){
                let str = "";
                if(userIdentity != "student"){
                    if(item.late){
                        str += "迟到人数" + item.late + "人，";
                    }
                    if(item.absent){
                        str += "缺勤人数" + item.absent + "人，";
                    }
                    if(item.leaveEarly){
                        str += "早退人数" + item.leaveEarly + "人，";
                    }
                    if(item.vacate){
                        str += "请假人数" + item.vacate + "人";
                    }
                }
                else {
                    if(item.late){
                        str += "迟到" + item.late + "次，";
                    }
                    if(item.absent){
                        str += "缺勤" + item.absent + "次，";
                    }
                    if(item.leaveEarly){
                        str += "早退" + item.leaveEarly + "次，";
                    }
                    if(item.vacate){
                        str += "请假" + item.vacate + "次";
                    }
                }
                if(str[str.length - 1] == "，"){
                    str = str.substr(0, str.length - 1);
                }
                let obj = {
                    time: item.date,
                    content: str
                }
                arr.push(obj);
            }
            if(type == "awardAndPunish"){
                if(userIdentity == "student"){
                    let obj = {
                        time: item.eventTime,
                        content: (
                            item.eventName?
                            item.eventType == 1?
                            "获得" + item.eventName:
                            (item.eventReason? "因为" + item.eventReason: "") + 
                            ("受到" + item.eventName):
                            ""
                        ),
                        eventType: item.eventType
                    }
                    arr.push(obj);
                } else {
                    let obj = {
                        time: item.eventTime,
                        content: (
                            item.eventName?
                            item.eventType == 1?
                            item.userName + "获得" + item.eventName:
                            item.userName + 
                            (item.eventReason? "因为" + item.eventReason: "") + 
                            ("受到" + item.eventName):
                            ""
                        ),
                        eventType: item.eventType
                    }
                    arr.push(obj);
                }
                
            }
            if(type == "schoolLiveMsg"){
                if(userIdentity == "student"){
                    let obj = {
                        time: item.eventTime,
                        content: (
                            item.eventType == 1?
                            item.place? "在" + item.place: "":
                            item.eventType ==2?
                            (item.place? "在" + item.place: "") + "消费了":
                            ""
                        ) + item.eventName + (item.eventType ==2? "元": ""),
                        eventType: item.eventType
                    }
                    arr.push(obj);
                } else {
                    let obj = {
                        time: item.eventTime,
                        content: (
                            item.eventName?
                            item.userName + (
                                item.eventType == 1?
                                item.place? "在" + item.place: "":
                                item.eventType == 2?
                                (item.place? "在" + item.place: "") + "消费了":
                                ""
                            ) + item.eventName + (item.eventType == 2? "元": ""):
                            ""
                        ),
                        eventType: item.eventType
                    }
                    arr.push(obj);
                }
                
            }
        })
        // setsortDataList(arr);
    // }, [type, sortData])
    let dataList = arr;
    let updateDataList = [];
    dataList.forEach((item)=>{
        if(item.content){
            updateDataList.push(item);
        }
    })
    let current = 0;
   if(Array.isArray(updateDataList) && updateDataList.length){
    updateDataList.forEach((item, j)=>{
        j = j + 1;
        // if(j!= 1 && j%flagCount == 1){
        //     current += 112;
        // }
        flagList.push(
            <Flag
            userIdentity={userIdentity}
            dataType={type}
            direction={j%2 == 0? 'bottom': 'top'}
            type={j%3 == 0? 'red': j%3 == 2? 'green': 'blue'}
            left={j == 1? -5 + j*112: j*140 - 33 + current}
            // left={j == 1? -5 + j*112: j*140 - 33 + current}
            data={[item]}
            ></Flag>
        )
    })
   }
    // useEffect(()=>{
    //     if(!currentIndex){
    //         let nextExist = true, prevExist = true;
    //         let node = $(".circle-container");
    //         let currentLeft = (node.css('left') && node.css('left').indexOf("au") != -1) || !node.css('left')? 0: parseInt(node.css('left'));
    //         let size = updateDataList.length % flagCount == 0? parseInt(updateDataList.length/flagCount): parseInt(updateDataList.length/flagCount) + 1;
    //         // console.log(node.css('left'),currentLeft, "偏向", updateDataList);
    //         if(Math.abs(currentLeft) >= Math.abs(952*size)){
    //             nextExist = false;
    //         } else {
    //             nextExist = true;
    //         }
    //         if(currentLeft >= 0){
    //             prevExist = false;
    //         } else {
    //             prevExist = true;
    //         }
    //         setPrevExist(prevExist);
    //         setNextExist(nextExist);
    //     }
    // }, [currentIndex, updateDataList]);
    let allow;
    const changeLeft = (btnType) => {
        clearTimeout(allow);
        allow = setTimeout(() => {
            let showWidth = parseInt($(`#${type}-track .show-container`).width());
            let nextExist = true, prevExist = true;
            let node = $(`#${type}-track .circle-container`);
            let size = String(updateDataList.length/flagCount).indexOf(".") != -1? parseInt(updateDataList.length/flagCount) + 1: parseInt(updateDataList.length/flagCount);
            let currentLeft = node.css('left') && node.css('left').indexOf("au") != -1? 0: parseInt(node.css('left'));
            if(btnType == "next"){
                if(Math.abs(currentLeft) >= Math.abs(showWidth*size)){
                    return;
                }
                console.log(currentLeft, showWidth, updateDataList.length, flagCount, size, "轨迹");
                if(Math.abs(currentLeft - 2*showWidth) >= Math.abs(showWidth*size)){
                    nextExist = false;
                    prevExist = true;
                }
                node.css("left", currentLeft - showWidth);
            }
            if(btnType == "prev"){
                if(currentLeft >= 0){
                    return;
                }
                if(currentLeft + showWidth >= 0){
                    prevExist = false;
                    nextExist = true;
                }
                node.css("left", currentLeft + showWidth);
            }
            setPrevExist(prevExist);
            setNextExist(nextExist);
        }, 150); 
    }
    return (
        <div className="track-show" id={type + "-track"}>
            {
                updateDataList && Array.isArray(updateDataList) &&
                updateDataList.length > flagCount && nextExist?
                <div className="next-page" onClick={()=>changeLeft("next")}></div>:
                ""
            }
            {
                updateDataList && Array.isArray(updateDataList) &&
                updateDataList.length > flagCount && prevExist?
                <div className="prev-page" onClick={()=>changeLeft("prev")}></div>:
                ""
            }
            <div className="show-container">
            {
                updateDataList && Array.isArray(updateDataList) &&
                updateDataList.length > 0?
                <div className="circle-container">
                    {flagList}
                    {circleList}
                </div>
                :
                <Empty
                // className={"bar-empty"}
                style={{position: 'relative', top: '80px'}}
                title={"暂无历程轨迹~"}
                type={"4"}
                ></Empty>
            }
            </div>
            
        </div>
    )
}

export default Track;